import React, { useState, useEffect } from "react";
import axios from "axios";
import { Table, Space, Button, Modal, message, Tag } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";

const { confirm } = Modal;

export default function AuditList(props) {
  const [dataSource, setDataSource] = useState();
  const fetchDate = async () => {
    const { username } = JSON.parse(localStorage.getItem("user"));
    const { data } = await axios.get(
      `/news?author=${username}&auditState_ne=0&publishState_lte=1&_expand=category`
    );
    setDataSource(data);
  };

  useEffect(() => {
    fetchDate();
  }, []);

  const handelCheck = async (id) => {
    const res = await axios.patch(`/news/${id}`, {
      publishState: 2,
      publishTime: Date.now(),
    });
    if (res.status === 200) {
      fetchDate();
      message.success("发布成功");
    }
  };

  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "新闻标题",
      dataIndex: "title",
      key: "title",
      render: (title, item) => (
        <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
      ),
    },
    {
      title: "作者",
      dataIndex: "author",
      key: "author",
    },
    {
      title: "分类",
      dataIndex: "category",
      key: "category",
      render: (category) => category.title,
    },
    {
      title: "审核状态",
      dataIndex: "auditState",
      key: "auditState",
      render: (auditState) => {
        const colorState = {
          0: "black",
          1: "orange",
          2: "green",
          4: "red",
        };
        const auditMap = {
          0: "未审核",
          1: "审核中",
          2: "已通过",
          3: "未通过",
        };
        return <Tag color={colorState[auditState]}>{auditMap[auditState]}</Tag>;
      },
    },
    {
      title: "操作",
      key: "action",
      render: (item) => (
        <Space size="middle">
          {item.auditState === 2 && (
            <Button
              type="primary"
              size="small"
              onClick={() => handelCheck(item.id)}
            >
              发布
            </Button>
          )}
          {item.auditState === 3 && (
            <Button
              type="primary"
              size="small"
              ghost
              onClick={() => {
                props.history.push(`/news-manage/update/${item.id}`);
              }}
            >
              更新
            </Button>
          )}
          {item.auditState === 1 && (
            <Button
              type="primary"
              size="small"
              danger
              ghost
              onClick={() => delConfirm(item)}
            >
              撤销
            </Button>
          )}
        </Space>
      ),
    },
  ];

  // 删除
  const deleteMethod = (item) => {
    const fetchDdlDate = async () => {
      const res = await axios.patch(`/news/${item.id}`, {
        auditState: 0,
      });
      if (res.status === 200) {
        fetchDate();
        message.success("撤销成功");
      }
    };
    fetchDdlDate();
  };

  const delConfirm = (item) => {
    confirm({
      title: "提示",
      icon: <ExclamationCircleOutlined />,
      content: "确定要撤销吗？",
      okText: "确认",
      cancelText: "取消",
      onOk() {
        console.log("OK");
        deleteMethod(item);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  return (
    <div>
      <Table
        bordered
        rowKey={(item) => item.id}
        dataSource={dataSource}
        columns={columns}
        pagination={{ pageSize: 10 }}
        size="small"
      />
    </div>
  );
}
